The logo is a geometric "R" assembled from three rounded rectangles on an 8-unit grid: top bar, middle right, bottom left. Use the dark mark on light surfaces, white on the deep ink chrome, and the orange variant only when the mark itself is the focal point — the wordmark already carries the brand color.

Replit orange #EC4E02 is the singular brand voice — used on the primary CTA, the logo accent, and key highlights. The marketing surface is a warm near-white; the workspace is near-black. Everything else is a five-stop neutral scale plus a full Radix-style rainbow reserved for the IDE.

Headlines wear ABC Diatype (Dinamo) — a confident, neo-grotesque display face introduced in the 2024 rebrand. Body is IBM Plex Sans, a warm-but-technical sans that ties the marketing site to the engineering DNA. Code is ReplitHack, the in-house fork of Hack used in the workspace. Diatype Pixel appears only as a marketing accent.

A 4pt grid keeps everything aligned. Replit favors generous radii — pill buttons (9999px), 14–18px on cards, 32px on hero surfaces. Shadows are soft and short-distance; the brand uses the orange glow only as a deliberate accent on hovered primary CTAs.

Replit buttons are pills (radius: 9999px) — the only shape on every primary surface. Orange is the singular conversion color (Create account, Get started). Ink is the secondary high-density action. Soft variants live inside dense product UI like the agent chat.

Inputs are 10px radius, generous padding, single-pixel border at --line-1. Focus pulls in --brand-accent-default with a 3px / 35% alpha ring. Labels in foreground-default; help text in dimmest. Error copy replaces help — never doubles up.

Feature cards use a mono eyebrow in brand orange, a Diatype title at 30px, and three lines of muted body. On hover, a subtle radial-gradient warms in from the top right. Testimonial cards keep avatars circular, meta in monospace, and stars in the brand orange.

Code blocks live on the deepest ink (#07080A). Token colors come from the workspace rainbow — keys in orange-200, strings in green, functions in blurple, comments in line-5. ReplitHack at 14px / 1.6 leading is the canonical reading size.

Badges are pill-shaped, mono-cased and dense — used for plan tiers, agent labels, and deploy status. Alerts use a tinted surface plus a colored 1px border (no left-bar) — softer than most, but legible against the cream marketing background.

FAQ blocks anchor every product page. Diatype trigger at 20px / 500, hover wash in --background-higher, chevron rotates 180° on open. Body uses base body color and exposes inline links in brand orange.

Replit's pricing card is the most-engineered surface on the marketing site. Featured tier earns a brand-orange ring, a "Most popular" pill, and the only solid-orange CTA. Everything else uses the soft / ink hierarchy.

Replit speaks in second person and the imperative mood — "build it," "ship it," "describe it." Sentences are short. Em-dashes carry rhythm. Technical jargon stays in the docs; marketing surfaces talk to humans, not to engineers.

The top nav is a single floating pill — full radius, 1px hairline border, blurred white background. The brand mark is paired with the wordmark in Diatype 600. CTAs collapse into Log in (ink) + Create account (orange). The footer is the only deep-ink surface on the marketing site.

Cream surface with a peach-glow radial in the top right. Question-headline (Diatype 500 / -.035em / .95 leading). Two-up CTA: orange primary (action), ink secondary (proof). Right side carries the live agent-chat mock — never a static screenshot.